<template>
	<base-page>
		<view slot="header">
			<!-- #ifdef MP-WEIXIN -->
			<cu-custom :isBack="true" bgColor="bg-white" :backCallType="true" @cuBack="Back"><block slot="content">编辑收货地址</block></cu-custom>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block>
				<!-- :backCallType="true" @cuBack="Back" -->
				<cu-custom :isBack="true" bgColor="bg-white"><block slot="content">编辑收货地址</block></cu-custom>
			</block>
			<!-- #endif -->
		</view>
		<view slot="center" class="auto-100 bg-gray">
			
			<view class="wrapper bg-white">
				<view class="info-wrapper">
					<view class="name df-cen-rl boder-padding">
						<view class="item ">姓名</view>
						<input placeholder="请输入姓名" v-model="name" type="text" class="ipt" />
					</view>
					<view class="name df-cen-rl boder-padding">
						<view class="item ">电话</view>
						<input placeholder="请输入电话" v-model="mobile" type="number" maxlength="11" class="ipt" />
					</view>
					<view class="name df-cen-rl boder-padding">
						<view class="item ">省市区</view>
						<view class="ipt"><xmg-region @change="onChangeRegion" :placeholder="full_address ? full_address : '请选择省市区'" :left="true"></xmg-region></view>
					</view>
					<view class="name df-cen-rl boder-padding">
						<view class="item ">详细地址</view>
						<input placeholder="请输入详细地址" v-model="address" type="text" class="ipt" />
					</view>
				</view>
				<view class="default df-cen-rl ">
					<view class="item">设为默认地址</view>
					<switch @change="SwitchA" :class="is_default ? 'checked' : ''" :checked="is_default ? true : false"></switch>
				</view>
				<view class="delBTn" @click="delAddress" v-if="editType">删除收货地址</view>
			</view>
			<view class="confirmBtn bg-gradual-orange" @click="submitVote">确定</view>
		</view>
	</base-page>
</template>

<script>
import xmgRegion from '@/components/global/xmg-region.vue';
import { addMemberaddress, editMemberaddress, delMemberaddress } from '@/common/js/request/modules/public.js';
import Qs from 'qs';
export default {
	data() {
		return {
			isSaving: true,
			name: '',
			mobile: '',
			address: '',
			full_address: '',
			province_id: '',
			city_id: '',
			district_id: '',
			province: '',
			city: '',
			district: '',
			is_default: 1,
			addInfo: {},
			editType: false
		};
	},
	components: {
		xmgRegion
	},
	props: {
		addList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	onLoad(e) {
		let options = this.$Router.queryObj();
		console.log(options);
	},
	onShow(e) {},
	onUnload() {
		// 移除监听事件
	},
	methods: {
		Back() {
			this.$Utils.compatiBleJump({ key: 'exit' }, 1);
		},
		delAddress() {
			console.log(this.addInfo.id);
			uni.showModal({
				title: '提示',
				content: '确认删除本条收货地址?',
				success: res => {
					if (res.confirm) {
						delMemberaddress({ id: this.addInfo.id })
							.then(res => {
								let backObj = uni.getStorageSync('backAddress');
								if (backObj) {
									this.$Router.reLaunch({
										path: backObj.path,
										query: backObj.query
									});
									uni.removeStorageSync('backAddress');
								} else {
									uni.navigateBack({
										delta: 1
									});
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		getAddDetail(obj) {
			
			this.$Apis.getMemberaddressInfo(obj).then(res => {
				this.addInfo = res;
				this.name = res.name;
				this.mobile = res.mobile;
				this.address = res.address;
				this.full_address = res.full_address;
				this.is_default = res.is_default;
				let arry = res.full_address.split('-');
				this.province = arry[0];
				this.city = arry[1];
				this.district = arry[2];
				this.province_id = res.province_id;
				this.city_id = res.city_id;
				this.district_id = res.district_id;
			});
			// uni.$on('addressDetail', v => {
			// 	this.addInfo = v;
			// 	this.name = this.addInfo.name;
			// 	this.mobile = this.addInfo.mobile;
			// 	this.address = this.addInfo.address;
			// 	this.full_address = this.addInfo.full_address;
			// 	this.is_default = this.addInfo.is_default;
			// 	let arry = this.addInfo.full_address.split('-');
			// 	this.province = arry[0];
			// 	this.city = arry[1];
			// 	this.district = arry[2];
			// });
		},
		SwitchA(e) {
			this.switchA = e.detail.value;
			if (this.switchA) {
				this.is_default = 1;
			} else {
				this.is_default = 0;
			}
		},
		/**
		 * 确认选择省市区
		 * @param {Array(Object)} region 省市区数据
		 */
		onChangeRegion(region) {
			console.log(region);
			this.full_address = region[0].name + region[1].name + region[2].name;
			this.province = region[0].name;
			this.city = region[1].name;
			this.district = region[2].name;
			this.province_id = region[0].id;
			this.city_id = region[1].id;
			this.district_id = region[2].id;
		},
		isCheck() {
			
			this.name = this.name.trim();
			if (!`${this.name}`.length) {
				return {
					isPass: false,
					msg: '请输入姓名'
				};
			}

			if (!this.$Utils.regCheckAll.isPhone(this.mobile)) {
				return {
					isPass: false,
					msg: `${this.mobile}`.length ? '请输入正确手机号码' : '请输入手机号码'
				};
			}

			if (!`${this.full_address}`.length) {
				return {
					isPass: false,
					msg: '请选择省市区'
				};
			}

			if (!`${this.address}`.length) {
				return {
					isPass: false,
					msg: '请输入详细地址'
				};
			}

			return {
				isPass: true,
				msg: '通过'
			};
		},
		submitVote() {
			const { isPass, msg } = this.isCheck();
			if (!isPass) {
				this.$Utils.tip(msg);
				return false;
			}
			uni.showModal({
				title: '提示',
				content: '确认保存本条收货地址?',
				success: res => {
					if (res.confirm) {
						this.addAddress();
					}
				}
			});
			if (this.isSaving) return false;
			this.isSaving = true;
		},
		addAddress() {
			let fields = {
				name: this.name,
				mobile: this.mobile,
				province_id: this.province_id,
				city_id: this.city_id,
				district_id: this.district_id,
				address: this.address,
				telphone: this.mobile,
				full_address: this.province + '-' + this.city + '-' + this.district,
				latitude: '',
				longitude: '',
				is_default: this.is_default,
				community_id: 0
			};
			if (this.editType) {
				fields['id'] = this.addInfo.id;
				editMemberaddress(fields)
					.then(res => {
						//
						let backObj = uni.getStorageSync('backAddress');
						if (backObj) {
							this.$Router.reLaunch({
								path: backObj.path,
								query: backObj.query
							});
							uni.removeStorageSync('backAddress');
						} else {
							uni.navigateBack({
								delta: 1
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			} else {
				addMemberaddress(fields)
					.then(res => {
						let backObj = uni.getStorageSync('backAddress');
						if (backObj) {
							this.$Router.reLaunch({
								path: backObj.path,
								query: backObj.query
							});
							uni.removeStorageSync('backAddress');
						} else {
							uni.navigateBack({
								delta: 1
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	},
	mounted() {
		let optios = this.$Router.queryObj();
		if (optios.id != undefined) {
			this.editType = true;
			this.getAddDetail(optios);
		}
		
	},
	onUnload() {
		// let backObj = uni.getStorageSync('backAddress');
		// if (backObj) {
		// 	uni.removeStorageSync('backAddress');
		// }
	}
};
</script>

<style lang="scss">
/deep/.ipt {
	.content {
		text-align: left;
	}
}
.confirmBtn {
	color: white;
	width: 80%;
	border-radius: 22px;
	padding: 15px;
	margin: 0 auto;
	text-align: center;
}
.delBTn {
	border-bottom: 5px solid #f4f4f4;
	padding: 15px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #fd3e5a;
}
.checked {
	background-color: #39b54a;
}
.name {
	.ipt {
		flex: 0.7;
		text-align: left;
		font-size: 14px;
	}
}
.wrapper {
	margin-bottom: 50px;
}
.info-wrapper {
	border-bottom: 5px solid #f4f4f4;
	padding: 0 15px;
	font-size: 14px;
	.item {
		flex: 0.3;
		font-size: 14px;
		font-weight: bold;
	}
}
.boder-padding {
	background-color: #fff;
	padding: 15px 0;
	border-bottom: 1px solid #f4f4f4;
}
.default {
	border-bottom: 5px solid #f4f4f4;
	padding: 15px;
	font-size: 14px;
	font-weight: bold;
}
.checked {
	border-radius: 50px;
}
</style>
